<template>
    <div class="user_container">
        <navBar :config="navBarConfig" />
        <div class="bady_content">
            <div class="left_content">
                <div class="user_info">
                    <div class="information">
                        <div class="user_left">
                            <span class="headPortrait">
                                <img class="userphoto" :src="userInfo.userPhoto || 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/avatar/default_avatar/default.png'">
                            </span>
                            <span>用户名</span>
                        </div>
                        <div class="user_right">
                            <div class="left">
                                <h4>累计签到</h4>
                                <h4>0天</h4>
                            </div>
                            <div class="right">
                                <h4>已获得云贝</h4>
                                <h4>0</h4>
                            </div>
                        </div>
                    </div>
                    <div class="storageSpace">
                        <div>
                            <span>存储空间</span>
                            <span>17.72MB</span>
                            <span>/10.0GB</span>
                        </div>
                        <div class="progressBar">
                            <el-progress :stroke-width="9" :percentage="Number(percentage)" :color="progressBg"></el-progress>
                        </div>
                    </div>
                </div>
                <div class="user_record ">
                    <h4>应用记录</h4>
                    <div class="record_content cloud_load">
                        <div class="content_item infinite-list " v-if="userList && userList.length > 0" style="overflow:auto">
                           <template v-for="List in userList">
                            <h4 style="width: 100%;">{{List.title}}</h4>
                            <div class="infinite-list-item cloud_load_item" v-for="item in List.content" :key="item.id"
                                @click="$router.push(item.routeLink)">
                                <div class="img"
                                    :style="{ backgroundImage: 'url(' + item.img + ')', backgroundSize: '100%', backgroundRepeat: 'no-repeat' }">
                                </div>
                                <div class="content_recommended">
                                    <div class="text_item">
                                        <span>{{ item.title }}</span><span>{{ item.time }}</span>
                                    </div>
                                    <div>{{ item.item }}</div>
                                    <div class="text_type">
                                        <span>{{ item.type }}</span>
                                        <span>{{ item.drawing }}</span>
                                    </div>
                                </div>
                                <div class="new_item" v-show="!item.newItem"></div>
                            </div>
                           </template>
                        </div>
                        <div class="user_record" v-else>
                            <div class="record"></div>
                            <div class="text">无应用记录</div>
                            <div class="toTravel">
                                <el-button @click="$router.push('/analysis')">前往云分析</el-button>
                                <el-button @click="$router.push('/chartOverview')">前往云图汇</el-button>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="cloud_load ">
                <h4>最新推荐/
                    <span style="font-size: 15px;">云图汇推荐</span>
                </h4>
                <div class="content_item infinite-list" style="overflow:auto">
                    <div class="infinite-list-item cloud_load_item" v-for="item in loadList" :key="item.id"
                        @click="$router.push(item.routeLink)">
                        <div class="img"
                            :style="{ backgroundImage: 'url(' + item.img + ')', backgroundSize: '100%', backgroundRepeat: 'no-repeat' }">
                        </div>
                        <div class="content_recommended">
                            <div class="text_item">
                                <span>{{ item.title }}</span><span>{{ item.time }}</span>
                            </div>
                            <div>{{ item.item }}</div>
                            <div class="text_type">
                                <span>{{ item.type }}</span>
                                <span>{{ item.drawing }}</span>
                            </div>
                        </div>
                        <div class="new_item" v-show="!item.newItem"></div>
                    </div>
                </div>

                <h4>最新推荐/
                    <span style="font-size: 15px;">云分析推荐</span>
                </h4>
                <div class="content_item infinite-list" style="overflow:auto">
                    <div class="infinite-list-item cloud_load_item" v-for="item in cloudList" :key="item.id"
                        @click="$router.push(item.routeLink)">
                        <div class="img"
                            :style="{ backgroundImage: 'url(' + item.img + ')', backgroundSize: '100%', backgroundRepeat: 'no-repeat' }">
                        </div>
                        <div class="content_recommended">
                            <div class="text_item">
                                <span>{{ item.title }}</span><span>{{ item.time }}</span>
                            </div>
                            <div>{{ item.item }}</div>
                            <div class="text_type">
                                <span>{{ item.type }}</span>
                                <span>{{ item.drawing }}</span>
                            </div>
                        </div>
                        <div class="new_item" v-show="!item.newItem"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'BaiaoweifanUiIndex',
    data() {
        return {
            userInfo:{},
            navBarConfig: {
                leftTool: true,
                rightTool: false,
            },
            percentage: 0.17,
            count: 0,
            progressBg: 'red',
            loadList: [
                {
                    id: 1,
                    img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
                    title: '交互RDA冗余分析',
                    time: '2023/07/29',
                    item: '通过交互散点图形式展示多个样品及变量间的相关性',
                    drawing: '高级绘图',
                    type: '关系图',
                    routeLink: '/',
                    newItem: false
                },
                {
                    id: 2,
                    img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
                    title: '交互RDA冗余分析',
                    time: '2023/07/29',
                    item: '通过交互散点图形式展示多个样品及变量间的相关性',
                    drawing: '高级绘图',
                    type: '关系图',
                    routeLink: '/',
                    newItem: false
                },
                {
                    id: 3,
                    img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
                    title: '交互RDA冗余分析',
                    time: '2023/07/29',
                    item: '通过交互散点图形式展示多个样品及变量间的相关性',
                    drawing: '高级绘图',
                    type: '关系图',
                    routeLink: '/',
                    newItem: true
                },
                {
                    id: 4,
                    img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
                    title: '交互RDA冗余分析',
                    time: '2023/07/29',
                    item: '通过交互散点图形式展示多个样品及变量间的相关性',
                    drawing: '高级绘图',
                    type: '关系图',
                    routeLink: '/',
                    newItem: true
                },
                {
                    id: 5,
                    img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
                    title: '交互RDA冗余分析',
                    time: '2023/07/29',
                    item: '通过交互散点图形式展示多个样品及变量间的相关性',
                    drawing: '高级绘图',
                    type: '关系图',
                    routeLink: '/',
                    newItem: true
                },
            ],
            cloudList: [
                {
                    id: 1,
                    img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
                    title: '交互RDA冗余分析',
                    time: '2023/07/29',
                    item: '通过交互散点图形式展示多个样品及变量间的相关性',
                    drawing: '高级绘图',
                    type: '关系图',
                    routeLink: '/',
                    newItem: false
                },
                {
                    id: 2,
                    img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
                    title: '交互RDA冗余分析',
                    time: '2023/07/29',
                    item: '通过交互散点图形式展示多个样品及变量间的相关性',
                    drawing: '高级绘图',
                    type: '关系图',
                    routeLink: '/',
                    newItem: false
                },
                {
                    id: 3,
                    img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
                    title: '交互RDA冗余分析',
                    time: '2023/07/29',
                    item: '通过交互散点图形式展示多个样品及变量间的相关性',
                    drawing: '高级绘图',
                    type: '关系图',
                    routeLink: '/',
                    newItem: false
                },
                {
                    id: 4,
                    img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
                    title: '交互RDA冗余分析',
                    time: '2023/07/29',
                    item: '通过交互散点图形式展示多个样品及变量间的相关性',
                    drawing: '高级绘图',
                    type: '关系图',
                    routeLink: '/',
                    newItem: false
                },
                {
                    id: 5,
                    img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
                    title: '交互RDA冗余分析',
                    time: '2023/07/29',
                    item: '通过交互散点图形式展示多个样品及变量间的相关性',
                    drawing: '高级绘图',
                    type: '关系图',
                    routeLink: '/',
                    newItem: false
                },
            ],
            userList: [
            // {
            //     id:'cloud',
            //     title:'云图汇',
            //     content:[
            //     {
            //         id: 1,
            //         img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
            //         title: '交互RDA冗余分析',
            //         time: '2023/07/29',
            //         item: '通过交互散点图形式展示多个样品及变量间的相关性',
            //         drawing: '高级绘图',
            //         type: '关系图',
            //         routeLink: '/',
            //         newItem: false
            //         },
            //         {
            //         id: 1,
            //         img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
            //         title: '交互RDA冗余分析',
            //         time: '2023/07/29',
            //         item: '通过交互散点图形式展示多个样品及变量间的相关性',
            //         drawing: '高级绘图',
            //         type: '关系图',
            //         routeLink: '/',
            //         newItem: false
            //         },
            //         {
            //         id: 1,
            //         img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
            //         title: '交互RDA冗余分析',
            //         time: '2023/07/29',
            //         item: '通过交互散点图形式展示多个样品及变量间的相关性',
            //         drawing: '高级绘图',
            //         type: '关系图',
            //         routeLink: '/',
            //         newItem: false
            //         },
            //     ]
            // },
            // {
            //     id:'analysis', 
            //     title:'云分析',
            //     content:[
            //     {
            //         id:1,
            //         img: 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/icons/InterRDA.png',
            //         title: '交互RDA冗余分析',
            //         time: '2023/07/29',
            //         item: '通过交互散点图形式展示多个样品及变量间的相关性',
            //         drawing: '高级绘图',
            //         type: '关系图',
            //         routeLink: '/',
            //         newItem: false
            //     },
            //     ]
            // }
            ]
        };
    },
    created(){
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    },
    mounted() {

    },

    methods: {
    },
};
</script>

<style lang="scss" scoped>
.user_container{
    max-height: calc(100vh - 200px);
}
.bady_content {
    display: flex;
    justify-content: space-between;
    flex: 1;

    .left_content {
        flex: 1;
        display: flex;
        flex-direction: column;

        .user_info {
            height: 240px;
            padding: 20px 50px;
            margin-top: 15px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 4px 4px 5px 2px #ccc;

            .information {
                margin-bottom: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .user_left {
                    display: flex;
                    align-items: center;

                    .headPortrait {
                        display: inline-block;
                        max-width: 100px;
                        max-height: 100px;
                        // background-color: #000;
                        border-radius: 50%;
                        margin-right: 30px;
                        .userphoto{
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            border: 1px solid #ccc;
                        }
                    }
                }

                .user_right {
                    display: flex;

                    .left,
                    .right {
                        width: 150px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        h4 {
                            margin: 10px 0;
                            font-weight: 400;
                            color: #999;
                        }
                    }

                    .left {
                        border-right: 1px solid #ccc;
                    }
                }
            }

            .storageSpace {
                div {
                    color: #666;
                    margin-top: 15px;

                    span {
                        &:first-child {
                            margin-right: 15px;
                            color: #000;
                        }

                        &:nth-child(2) {
                            font-weight: 700;
                        }

                        &:last-child {
                            color: #666;
                            font-size: 13px;
                        }
                    }
                }
            }
        }

        .user_record {
            margin-top: 15px;
            width: 100%;
            height: calc(100vh - 420px);

            .record_content {
                width: 100%;
                // height: 90%;
                height: 85%;
                // background-color: #fff;
            }
            .user_record{
                // background-color: red;
                display: flex;
                align-items: center;
                flex-direction: column;
                .record{
                    width: 200px;
                    height: 200px;
                    background: url(../../assets/record.png) no-repeat;
                    background-size: 200px;
                }
                .text{
                    font-size: 20px;
                    color: #555;
                    font-weight: 700;
                    padding-bottom: 35px;
                }
                .el-input__inner, .el-button{
                    border-radius: 4px;
                }
            }
        }
    }


    .cloud_load {
        // position: relative;
        width: 49%;
        height: calc(53vh - 170px);
        margin-top: 15px;
        // background-color: #fff;
        border-radius: 8px;
        // box-shadow: 4px 2px 5px 2px #ccc;   
        padding: 0px 20px 10px;
        // h4{
        //  position: fixed;
        //  top: 130px;
        //  right: 300px;
        // }

        .content_item {
            // width: 0;
            display: flex;
            flex-wrap: wrap;
            // display: inline-block;
            align-content: flex-start;
            height: 100%;

            .cloud_load_item {
                cursor: pointer;
                position: relative;
                max-width: 350px;
                height: 130px;
                background-color: #fff;
                border-radius: 8px;
                display: flex;
                // align-items: center;
                padding: 25px;
                margin: 0 15px 15px 0;
                font-size: 12px;
                box-shadow: 2px 1px 3px 2px #ccc;

                .new_item {
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    background: url(../../assets/new.png) no-repeat;
                    background-size: 40px;
                    border-radius: 6px;
                    transform: rotate(90deg);
                }

                // color: #000;
                .img {
                    width: 50px;
                    height: 50px;
                    // background-color: #fff;
                    margin-right: 20px;
                }

                .content_recommended {
                    //     display: flex;
                    //    flex-direction: column;
                    color: #999;

                    .text_item {
                        // display: flex;
                        margin-bottom: 5px;
                        color: #333;
                        margin-bottom: 15px;

                        span {
                            &:first-child {
                                margin-right: 15px;
                                font-weight: 700;
                                font-size: 15px;
                            }
                        }
                    }

                    .text_type {
                        margin-top: 15px;

                        span {
                            margin-right: 10px;
                            padding: 3px 8px;
                            border: 1px solid #ccc;
                            border-radius: 3px;
                        }
                    }
                }
            }
        }

    }

}
</style>